/*
 * @Author: Zhang Kai
 * @Date: 2022-03-07 16:49:33
 * @LastEditors: Zhang Kai
 * @LastEditTime: 2022-06-01 16:08:13
 * @FilePath: /metricsx-standard-ui/src/views/indexlib/components/tabs/index.tsx
 */
import { defineComponent, reactive } from 'vue';
import BindmodelTable from '@/views/indexlib/components/bindmodelTable';
import ChangeReacord from '@/views/indexlib/components/changeReacord/index';
import ApplicationInfo from '@/views/indexlib/components/applicationInfo/index';
import IndexCorrelation from '@/views/indexlib/components/indexCorrelation/index';
import './index.scss';
//页签业务组件
const IndexlibTabs = defineComponent({
  name: 'IndexlibTabs',
  components: {
    BindmodelTable,
    ChangeReacord,
    ApplicationInfo,
    IndexCorrelation
  },
  props: {
    id: String,
    isNotAtom: {
      type: Boolean,
      default: true
    }
  },
  setup: (props) => {
    const state = reactive({
      activeName: props.isNotAtom ? 'application' : 'correlation'
    });
    return () => {
      console.log(state, 'state');
      console.log(props.id, 'props.id');
      return (
        <div class="indexlib-taps-wrap">
          <el-tabs v-model={state.activeName}>
            {/* {props.isNotAtom && (
              <el-tab-pane
                label="绑定模型"
                name="bind"
                class="tab bindmodel-tab"
              >
                {props.id && state.activeName === 'bind' && (
                  <BindmodelTable mId={props.id} />
                )}
              </el-tab-pane>
            )} */}
            {props.isNotAtom && (
              <el-tab-pane
                label="应用信息"
                name="application"
                class="tab application-info"
              >
                {props.id && state.activeName === 'application' && (
                  <ApplicationInfo id={props.id} />
                )}
              </el-tab-pane>
            )}
            <el-tab-pane
              label="变更记录"
              name="change"
              class="tab change-record"
            >
              {props.id && state.activeName === 'change' && (
                <change-reacord id={props.id} />
              )}
            </el-tab-pane>
            <el-tab-pane label="关联指标" name="correlation" class="tab">
              {state.activeName === 'correlation' && (
                <IndexCorrelation id={props.id} />
              )}
            </el-tab-pane>
          </el-tabs>
        </div>
      );
    };
  }
});

export default IndexlibTabs;
